<template>
  <div class="home">
    <el-container>
      <el-header>
        <h1 class="h1_box">NUN-ADMIN</h1>
        <div>
          <!-- 头部 -->
        <el-menu class="el-menu-demo" mode="horizontal" router>
          <el-menu-item index="/user">首页</el-menu-item>
          <el-menu-item index="/dity">商品</el-menu-item>
          <el-menu-item index="/order">订单</el-menu-item>
        </el-menu>
        <!-- 下拉菜单 -->
        <el-col :span="1.5" class="xiala">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button @click="addremove">退出登录</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        </div>
      </el-header>

      <el-container>
        <!-- <el-aside width="200px"></el-aside> -->
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    addremove() {
      console.log(1111);
      localStorage.removeItem("token");
      this.$message({
        showClose: true,
        message: "退出成功",
        type: "error",
      });
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style lang="scss">
header {
  display: flex;
  justify-content: space-between;
  >div{
    display: flex;
  }
}

.xiala {
  margin-top: 20px;
}

.h1_box{
  height: 70px;
  line-height: 70px;
}
</style>
